$(function(){
    var endPointOptions = {
        url : "http://localhost:9300/GetEmployees",
        type: "GET",
        dataType: "json",
        //data interchange format
        success: function(data,status,requestObj){
            var employeeList = data.empData.EmployeeList;
            var empTableDataString = '';
            for(var i = 0; i < employeeList.length; i++){
                empTableDataString += '<tr><td>' + (i + 1)
                    + '</td><td>' + employeeList[i].name
                    + '</td><td>' + employeeList[i].title
                    + '</td><td>' + employeeList[i].city
                     + '</tr>';


              }

            $('#employeeDetails tbody').append(empTableDataString);

        },
        error : function(error){

            alert('error occurred');
        },
        complete: function(){

        }
    };

  //  sum(1,2);//
    $.ajax(endPointOptions);


    //get -- retrieving
    //post -- posting -- saving

    //------------------------------
    //get can be used for saving data also
    //post -- retrieving

    var postEndPointOptions =  {
        url : "http://localhost:9300/createUserDetails",
        type: "POST",
        dataType: "json",

        timeout: 10000,//10 secs
        // request browser to server
        //15secs

        success: function(data,status,requestObj){

            alert('created user successfully');

        },
        error : function(error){

            alert('error occurred while saving data');
        },
        complete: function(){

        }
    };


    // event handlers
    $('#btnNavigateUserDetails').click(function(event){

        $('#userDetails').load('form.html',function(){
            //form is loaded

            $('#btnSubmit').click(function (){

                //1. get all user entered details in to an object
          var userDetails =   getUserEnteredValues();

                //2 do a ajax post and send data along with it


               postEndPointOptions.data = userDetails;
            //    postEndPointOptions.data = postData;
                $.ajax(postEndPointOptions);
            });
            ;

        });

        function getUserEnteredValues(){
            var userDetails = { };

            userDetails.name = $('#nameInput').val();
            userDetails.address = $('#addressInput').val();
            userDetails.email = $('#emailInput').val();
            userDetails.phone = $('#phoneInput').val();

            return userDetails;
        }

        $('#displayEmpDetails').hide();//display : none

        $('#userDetails').show();//if it is hidden make is visible

    });

});